<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>新增学生</h3>
    <form>
        <div>
            <label>学生姓名：</label>
            <input type="text" id="addName">
        </div>
        <div>
            <label>学生年龄：</label>
            <input type="number" id="addAge">
        </div>
        <div>
            <label>学生性别：</label>
            <input type="radio" name="addGender" value="男"><label>男</label>
            <input type="radio" name="addGender" value="女"><label>女</label>
        </div>
        <div>
            <button type="button" id="addBtn">确认新增</button>
        </div>
    </form>
    <h3>修改学生</h3>
    <form>
        <!-- 页面上看不见的输入框 -->
        <input type="hidden" id="updateId">

        <div>
            <label>学生姓名：</label>
            <input type="text" id="updateName">
        </div>
        <div>
            <label>学生年龄：</label>
            <input type="number" id="updateAge">
        </div>
        <div>
            <label>学生性别：</label>
            <input type="radio" name="updateGender" value="男"><label>男</label>
            <input type="radio" name="updateGender" value="女"><label>女</label>
        </div>
        <div>
            <button type="button" id="updateBtn">确认修改</button>
        </div>
    </form>
    <h3>学生列表</h3>
    <div>
        <select id="searchType">
            <option value="name">姓名</option>
            <option value="age">年龄</option>
            <option value="gender">性别</option>
        </select>
        <input type="text" id="searchValue">
        <button id="searchBtn">搜索</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>学生姓名</th>
                <th>学生年龄</th>
                <th>学生性别</th>
                <th>学生操作</th>
            </tr>
        </thead>
        <tbody id="list"></tbody>
    </table>
    <script>
        const addGenders = document.querySelectorAll("[name=addGender]");
        const updateGenders = document.querySelectorAll("[name=updateGender]");


        let studentsData = [
            { id: 1, name: '张三', age: 20, gender: '男' },
            { id: 2, name: '李四', age: 12, gender: '女' },
            { id: 3, name: '王五', age: 19, gender: '男' },
        ];
        studentsRender();


        // 搜索
        searchBtn.onclick = function () {
            const type = searchType.value;    // name
            const value = searchValue.value;  // 张

            const searchData = studentsData.filter(item => {
                // 精确查询
                // return item[type] == value;
                // 模糊查询
                return item[type].toString().includes(value);
            })
            studentsRender(searchData)
        }

        // 新增
        addBtn.onclick = function () {
            const name = addName.value;
            const age = addAge.value;
            const gender = [...addGenders].find(item => item.checked)?.value;
            studentsData.push({
                id: Date.now(),
                name, age, gender
            })
            studentsRender();
        }

        // 确认修改
        updateBtn.onclick = function () {
            const id = updateId.value;
            const name = updateName.value;
            const age = updateAge.value;
            const gender = [...updateGenders].find(item => item.checked)?.value;

            studentsData = studentsData.map(item => {
                if (item.id == id) {
                    return {
                        ...item,
                        id: id,
                        name: name,
                        age,
                        gender
                    }
                }
                return item;
            })

            studentsRender();
        }

        // 删除和修改
        list.onclick = function (e) {
            // 删除
            if (e.target.className === 'deleteBtn') {
                const id = e.target.dataset.id;
                studentsData = studentsData.filter(item => item.id != id);
                studentsRender();
            }
            // 修改
            if (e.target.className === 'updateBtn') {
                const id = e.target.dataset.id;
                const updateItem = studentsData.find(item => item.id == id);
                // 设置修改表单的默认值
                updateName.value = updateItem.name;
                updateAge.value = updateItem.age;
                const radioEle = [...updateGenders].find(item => item.value === updateItem.gender);
                if (radioEle) {
                    radioEle.checked = true;
                }
                updateId.value = updateItem.id;

            }
        }


        function studentsRender(data = studentsData) {
            list.innerHTML = data.map(item => {
                return (
                    `<tr>
                        <td>${item.name}</td>    
                        <td>${item.age}</td>    
                        <td>${item.gender}</td>    
                        <td>
                            <button class="updateBtn" data-id="${item.id}">修改</button>    
                            <button class="deleteBtn" data-id="${item.id}">删除</button>    
                        </td>    
                    </tr>`
                )
            }).join('');
        }
    </script>

</body>

</html>